<template>
	<page-meta :root-font-size="getRootFontSize()"></page-meta>
	<view :style="{ height: windowHeight + 'px' }">
		<view class="topBox">
			<view class="status_bar"></view>
			<uni-nav-bar style="width: 750rpx; height: 44px;" @clickRight="showSetUp" color="#FDFDFD" :border="false" :shadow="false" background-color="#FBFBFF">
				<!-- <view class="titleImg"><image style="width: 100%; height: 100%;" mode="scaleToFill" src="/static/icon/logo_ctw@3x.png"></image></view> -->
				<!-- 			<view slot="left">
					<view class="leftIconBox"><uni-icons type="arrowleft" color="#000" size="18"></uni-icons></view>
				</view> -->
				<view slot="right"><uni-icons type="bars" color="#7F7F7F" size="28"></uni-icons></view>
			</uni-nav-bar>
		</view>
		<view class="zhuti" :style="{ top: topBar }">
			<view class="imageTopBox">{{ i18n.ctwfont53 }}</view>
			<view class="tabTopBox">
				<view
					class="tabTopItem"
					:style="{ margin: index === 1 ? '0 1px' : 0, backgroundColor: tabBg === item.id ? '#F77687' : '#848484' }"
					@tap="tabbtn(item.id)"
					v-for="(item, index) in tabList"
					:key="index"
				>
					<view class="tabTopItemImg"><image class="tabTopItemImgBox" :class="tabBg === item.id ? '' : 'tabTopItemImgBoxHui'" :src="item.img" mode=""></image></view>
					<view class="tabTopItemTitle">{{ item.text }}</view>
				</view>
			</view>
			<view class="tabTopBoxItem" v-if="tabBg == 1">
				<view class="tabTopBoxItemTopLeft">
					<view>Call Center</view>
					<view class="tabTopBoxItemTopLeftTitle">093-635-2869</view>
				</view>
				<view class="tabTopBoxItemIcon">
					<view class="BottomIcons" @tap="goApp(item)" v-for="(item, index) in iconList" :key="index">
						<image style="width: 100%; height: 100%;" mode="scaleToFill" :src="item.img"></image>
					</view>
					<view class="tabTopBoxItemIconTitle">@superantcargo</view>
				</view>
				<view class="tabTopBoxItemUrl">www.superantcargo.com</view>
			</view>

			<view class="tabTopBoxItemRight" v-else><view class="tabTopBoxItemRightTitle">{{ i18n.ctwfont44 }}</view></view>
			<view class="redLine"></view>
			<!-- 内容 -->
		</view>

		<view :style="{ paddingTop: topBarTwo }">
			<business-card-one v-if="tabBg === 1" :codeList="codeListTwo"></business-card-one>
			<business-card-two :codeList="codeList" v-else></business-card-two>
		</view>
		<!-- 遮罩组件 -->
		<view @tap="removeMask(1)"><cpt-mask v-if="mask"></cpt-mask></view>
		<!-- 登录 -->
		<login-pages v-if="loginMaskBox" :MaskBox="loginMaskBox" @removeLoginMaskBox="removeLoginMaskBox" @loginSubmit="loginSubmit"></login-pages>
		<!-- 设置 -->
		<uni-popup ref="SetUpPopup" type="center" :animation="false"><set-up-pages ref="showPopup" @closePopUp="closePopUp" /></uni-popup>
		<!-- 退出 -->
		<sign-out ref="signOutBox" />
		<lb-tabbar ref="tabbar" :value="$store.state.tabActive" :animate="$store.state.animate" :placeholder="true">
			<lb-tabbar-item
				v-for="item in $store.state.tabbars"
				:key="item.pagePath"
				:name="item.pagePath"
				:icon="item.iconPath"
				:selectedIconPath="item.selectedIconPath"
				:dot="item.dot"
				:info="item.info"
				:raisede="item.raisede"
				icon-prefix="iconfont"
				@click="handleTabbarItemClick"
			>
				{{ item.text }}
			</lb-tabbar-item>
		</lb-tabbar>
	</view>
</template>

<script>
import cptMask from '@/pages/home/cptMask.vue'; // 蒙版
import loginPages from '@/pages/logins/loginPages.vue'; // 登录
import setUpPages from '@/pages/setUpPages/index.vue';
import signOut from '@/pages/setUpPages/signOut.vue'; // 退出登录
import businessCardOne from './businessCardOne.vue';
import businessCardTwo from './businessCardTwo.vue';
import { getStorage, setStorage } from '@/utils/setStorage.js';
import { codeMapFun } from '@/utils/codeMap.js';
import baseFont from '@/utils/baseFont.js';
// tababr
import lbTabbar from '@/pages/lb-tabbar/lb-tabbar.vue';
import lbTabbarItem from '@/pages/lb-tabbar/lb-tabbar-item.vue';
export default {
	extends: baseFont,
	data: function() {
		return {
			topBarHeight: 0,
			windowHeight: 0,
			back_k: 0, // 物理返回
			popupIsShow: false, // 打开设置的标识
			signOutShow: false, // 退出登录
			mask: false, // 蒙版Show
			loginMaskBox: false, // 登录模块
			tabBg: 1,
			codeList: [],
			codeListTwo: [
				{
					storehouseId: 4,
					e3Number: '018001',
					nameCn: '广州仓库',
					nameEn: 'Guangzhou Warehouse',
					nameTh: 'คลังสินค้าเมืองกวางโจว',
					status: 1,
					addressCn: '广州市白云区白云湖街大朗村朗兴路7号CTW8仓（可导航CTW8仓）',
					contactWayCn: '货物&仓库路线咨询: 13416307791, 20-87465324',
					receiveTimeCn: '快递签收&查询 : 13798001742',
					markCn: null,
					addressEn: 'CTW8 warehouse, No. 7 Langxing Road, Dalang Village, Baiyun Lake Street,  Baiyun District, Guangzhou City (navigable CTW8 warehouse)',
					contactWayEn: 'สอบถามเรื่องสินค้าและเส้นทางมาส่งสินค้าที่โกดัง : 13416307791, 20-87465324',
					receiveTimeEn: 'สอบถามเรื่องพัสดุและการเซ็นต์รับพัสดุ : 13798001742',
					markEn: null,
					addressTh: 'CTW8 warehouse, No. 7 Langxing Road, Dalang Village, Baiyun Lake Street,  Baiyun District, Guangzhou City (navigable CTW8 warehouse)',
					contactWayTh: 'สอบถามเรื่องสินค้าและเส้นทางมาส่งสินค้าที่โกดัง : 13416307791, 20-87465324',
					receiveTimeTh: 'สอบถามเรื่องพัสดุและการเซ็นต์รับพัสดุ : 13798001742',
					markTh: null,
					addressTitleCn: '广州仓库',
					addressTitleEn: 'คลังเก็บสินค้าเมืองกวางโจว (Guangzhou Warehouse)',
					addressTitleTh: 'คลังเก็บสินค้าเมืองกวางโจว (Guangzhou Warehouse)',
					navigation: 'https://s.weibo.com/weibo?q=%23i%E8%8C%85%E5%8F%B0%E6%88%90%E4%B8%BAAppStore%E5%85%8D%E8%B4%B9%E6%A6%9C%E7%AC%AC%E4%B8%80%23&topic_ad=',
					url: 'https://ctwcms.oss-ap-southeast-1.aliyuncs.com/web/ctw_markets/contact_us/contact_us_0.jpg',
					map:
						'https://www.amap.com/search?query=%E5%B9%BF%E5%B7%9E%E5%B8%82%E7%99%BD%E4%BA%91%E5%8C%BA%E7%99%BD%E4%BA%91%E6%B9%96%E8%A1%97%E5%A4%A7%E6%9C%97%E6%9D%91%E6%9C%97%E5%85%B4%E8%B7%AF7%E5%8F%B7CTW8%E4%BB%93&city=440100&geoobj=113.23398%7C23.239149%7C113.239163%7C23.241783&zoom=18.13'
				}
			],
			iconList: [
				{
					app: 'LINE',
					img: '/static/icon/AboutUs/2x/AboutUs20@2x.png'
				},
				{
					app: 'FB',
					img: '/static/icon/AboutUs/2x/AboutUs18@2x.png'
				},
				{
					app: 'INS',
					img: '/static/icon/AboutUs/2x/AboutUs17@2x.png'
				},
				{
					app: 'UT',
					img: '/static/icon/AboutUs/2x/AboutUs15@2x.png'
				}
			]
		};
	},
	onLoad(option) {
		const { pages } = option;
		this.tabbtn(Number(pages) || 1);
		// 拦截物理返回键
		this.goBackBox();
	},
	onUnload() {
		uni.$off('goBack_k', this.goBackBox2);
	},
	onShow() {
		this.$nextTick(() => {
			this.$store.dispatch('getPushBadgeNum');
		});
	},
	onHide() {
		if (this.$refs.SetUpPopup) {
			this.$refs.SetUpPopup.close();
		}
		if (this.$refs.signOutBox) {
			this.$refs.signOutBox.close();
		}
		this.popupIsShow = false;
	},
	created() {
		const that = this;
		uni.getSystemInfo({
			success(res) {
				that.topBarHeight = res.statusBarHeight;
				that.windowHeight = res.windowHeight;
			}
		});
		this.getDelivery();
	},
	components: { setUpPages, signOut, businessCardOne, businessCardTwo, lbTabbar, lbTabbarItem, cptMask, loginPages },
	computed: {
		topBar() {
			let num = 0;
			num = this.topBarHeight + 44; // 44是顶部高度
			return num + 'px';
		},
		topBarTwo() {
			let num = 0;
			if (this.tabBg == 1) {
				if (uni.getSystemInfoSync().platform == 'android') {
					num = this.topBarHeight + 88 + 610; // 44是顶部高度
				} else {
					num = this.topBarHeight + 88 + 610 - 34; // 44是顶部高度
				}
			} else {
				if (uni.getSystemInfoSync().platform == 'android') {
					num = this.topBarHeight + 88 + 330; // 44是顶部高度
				} else {
					num = this.topBarHeight + 88 + 330 - 14; // 44是顶部高度
				}
			}

			return num + 'rpx';
		},
		i18n() {
			return this.$t('businessCard');
		},
		tabList() {
			const arr = [
				{
					text: this.$t('businessCard').ctwfont41,
					img: '/static/icon/superAnt/contactQtwo.png',
					id: 1
				},
				{
					text: this.$t('businessCard').ctwfont42,
					img: '/static/icon/superAnt/contactQone.png',
					id: 2
				}
			];
			return arr;
		}
	},
	methods: {
		handleTabbarItemClick(e) {
			const token = getStorage('token');
			if (token === undefined || token === null || token === '') {
				let currentRoutes = getCurrentPages(); // 获取当前打开过的页面路由数组
				let currentRoute = currentRoutes[currentRoutes.length - 1].route; //获取当前页面路由
				let currentParam = currentRoutes[currentRoutes.length - 1].options; //获取路由参数
				// 拼接参数
				let param = '';
				for (let key in currentParam) {
					param += '?' + key + '=' + currentParam[key];
				}
				let localRoute = '/' + currentRoute + param;
				if (e.name == localRoute) {
					return false;
				} else {
					if (e.name === '/pages/businessCard/index' || e.name === '/pages/home/index') {
						// #ifdef APP-PLUS
						uni.redirectTo({
							url: e.name
						});
						// #endif
						// #ifdef H5
						this.$Router.push(e.name);
						// #endif
					} else {
						this.removeMask(2);
					}
				}
			} else {
				// this.$store.state.tabActive = e.name;
				let currentRoutes = getCurrentPages(); // 获取当前打开过的页面路由数组
				let currentRoute = currentRoutes[currentRoutes.length - 1].route; //获取当前页面路由
				let currentParam = currentRoutes[currentRoutes.length - 1].options; //获取路由参数
				// 拼接参数
				let param = '';
				for (let key in currentParam) {
					param += '?' + key + '=' + currentParam[key];
				}
				let localRoute = '/' + currentRoute + param;
				if (e.name == localRoute) {
					return false;
				} else {
					// #ifdef APP-PLUS
					uni.redirectTo({
						url: e.name
					});
					// #endif
					// #ifdef H5
					this.$Router.push(e.name);
					// #endif
				}
			}
		},
		// 隐藏蒙版
		removeMask(val) {
			if (val === 1) {
				this.mask = false;
				this.loginMaskBox = true;
			} else {
				this.mask = true;
				// this.LoginView.hide();
			}
		},
		// 登录模块
		removeLoginMaskBox(val) {
			if (val) {
				this.loginMaskBox = false;
				setStorage('showLoginBox', false);
				setStorage('loginShow', 1); // tabbar点击
			} else {
				this.loginMaskBox = true;
			}
			// val ? (this.loginMaskBox = false) : (this.loginMaskBox = true);
		},
		// 登录成功
		loginSubmit(val) {
			if (val) {
				this.loginMaskBox = false;
				setStorage('showLoginBox', false);
				setStorage('loginShow', 1); // tabbar点击
				const languageFlag = getStorage('language') || 'th';
				LanguageConfig.isExist('');
				this.$i18n.locale = '';
				setTimeout(() => {
					LanguageConfig.isExist(languageFlag);
					this.$i18n.locale = languageFlag;
				}, 100);
				this.isLoginShow = true;
				const user = JSON.parse(getStorage('userconter'));
				if (user) {
					this.userList = user.customerCode;
				}
			}
		},
		goBackBox() {
			// const that = this;
			uni.$on('goBack_k', this.goBackBox2);
		},
		goBackBox2(data) {
			this.back_k < 0 ? (this.back_k = 0) : (this.back_k = this.back_k);
			if (data) {
				if (this.loginMaskBox) {
					this.loginMaskBox = false;
					setStorage('showLoginBox', false);
					setStorage('loginShow', 1); // tabbar点击
				} else if (this.popupIsShow) {
					this.$refs.SetUpPopup.close();
					this.popupIsShow = false;
				} else if (this.signOutShow) {
					this.$refs.signOutBox.close();
					this.signOutShow = false;
				} else {
					let main = plus.android.runtimeMainActivity();
					if (this.back_k > 0) {
						this.back_k = 0;
						return main.moveTaskToBack(false);
						// return plus.runtime.quit();
					} else {
						const pages = getCurrentPages();
						if (pages.length === 1) {
							this.back_k++;
							setTimeout(() => {
								this.back_k--;
							}, 1000);
							// uni.showToast({
							// 	title: '再按一次退出应用',
							// 	icon: 'none',
							// 	duration: 1000
							// });
						}
					}
				}
			}
		},
		// 打开设置
		showSetUp() {
			this.$refs.SetUpPopup.open('right');
			this.popupIsShow = true;
		},
		// 关闭设置
		closePopUp(val) {
			if (val) {
				this.$refs.SetUpPopup.close();
				this.popupIsShow = false;
			} else {
				this.$refs.SetUpPopup.close();
				this.popupIsShow = false;
				this.$refs.signOutBox.open();
				this.signOutShow = true;
			}
		},
		// 点击tab
		tabbtn(val) {
			if (val === 1) {
				this.isFixed = true;
			} else {
				this.isFixed = false;
				this.getDelivery();
			}
			this.tabBg = val;
		},
		// 获取送货地址
		async getDelivery() {
			const { data: res } = await this.$http(true, 'api/storehouse/list', '', 'GET');
			if (res.errno === 0) {
				if (res.data) {
					res.data.forEach(item => {
						if (item.e3Number == '018001') {
							item.url = 'https://ctwcms.oss-ap-southeast-1.aliyuncs.com/web/ctw_markets/contact_us/contact_us_0.jpg';
							item.map =
								'https://www.amap.com/search?query=%E5%B9%BF%E5%B7%9E%E5%B8%82%E7%99%BD%E4%BA%91%E5%8C%BA%E7%99%BD%E4%BA%91%E6%B9%96%E8%A1%97%E5%A4%A7%E6%9C%97%E6%9D%91%E6%9C%97%E5%85%B4%E8%B7%AF7%E5%8F%B7CTW8%E4%BB%93&city=440100&geoobj=113.23398%7C23.239149%7C113.239163%7C23.241783&zoom=18.13';
						} else if (item.e3Number == '018004') {
							item.url = 'https://ctwcms.oss-ap-southeast-1.aliyuncs.com/web/ctw_markets/contact_us/contact_us_1.jpg';
							item.map =
								'https://www.amap.com/search?query=%E6%B5%99%E6%B1%9F%E7%9C%81%E4%B9%89%E4%B9%8C%E5%B8%82%E5%BB%BF%E4%B8%89%E9%87%8C%E6%A5%BC%E5%B1%B1%E5%A1%98%E5%A4%A7%E9%80%9A%E8%B7%AF1181-1183%E5%8F%B7%EF%BC%88%E7%A5%9E%E5%8A%9B%E5%88%9B%E4%B8%9A%E5%9B%AD%EF%BC%89&city=440100&geoobj=113.242252%7C23.235823%7C113.250263%7C23.239893&zoom=17.5';
						} else if (item.e3Number == '018003') {
							item.url = 'https://ctwcms.oss-ap-southeast-1.aliyuncs.com/web/ctw_markets/contact_us/contact_us_2.jpg';
							item.map =
								'https://www.amap.com/search?query=%E5%B9%BF%E4%B8%9C%E7%9C%81%E4%B8%9C%E8%8E%9E%E5%B8%82%E8%99%8E%E9%97%A8%E9%95%87%E9%BE%99%E7%9C%BC%E6%9D%91%E5%B7%A5%E4%B8%9A%E5%8C%BA%E5%8D%81%E8%B7%AF37%E5%8F%B7&city=330700&geoobj=120.159161%7C29.351651%7C120.167837%7C29.355833&zoom=17.39';
						} else if (item.e3Number == '018006') {
							item.url = 'https://ctwcms.oss-ap-southeast-1.aliyuncs.com/web/ctw_markets/contact_us/contact_us_3.jpg';
							item.map =
								'https://www.amap.com/search?query=%E4%BD%9B%E5%B1%B1%E5%B8%82%E9%A1%BA%E5%BE%B7%E5%8C%BA%E4%B9%90%E4%BB%8E%E9%95%87%E9%A9%AC%E6%BB%98%E5%8C%97%E5%B8%9D%E5%BA%99%E5%85%AC%E4%BA%A4%E8%BD%A6%E7%AB%99&city=440600&geoobj=113.012747%7C22.939638%7C113.131538%7C23.000124&zoom=13.61';
						}
					});
					this.codeList = res.data;
				}
			} else {
				const err = codeMapFun().find(item => item[res.errno]);
				if (err) {
					uni.showToast({
						title: err[res.errno],
						icon: 'none',
						position: 'top'
					});
				} else {
					uni.showToast({
						title: res.errmsg,
						icon: 'none',
						position: 'top'
					});
				}
			}
		},
		// 调起第三方app
		goApp(item) {
			if (plus.os.name == 'Android') {
				if (item.app === 'WX') {
					plus.runtime.openURL('weixin://', function(e) {
						// plus.runtime.openURL('https://mobile.amap.com/', function(err) {
						// 	console.log(err);
						// });
					});
					uni.setClipboardData({
						data: 'CTW物流',
						showToast: true,
						success: function() {}
					});
				} else if (item.app === 'FB') {
					// url = encodeURI('https://www.facebook.com/');
					plus.runtime.openURL('https://www.facebook.com/Cargo.CTW', function(e) {});
				} else if (item.app === 'INS') {
					// url = encodeURI('http://www.instagram.com/');
					plus.runtime.openURL('https://www.instagram.com/ctwcargo/', function(e) {});
				} else if (item.app === 'TW') {
					// url = encodeURI('https://www.twitter.com/');
					plus.runtime.openURL('https://mobile.twitter.com/ctw_cargo', function(e) {});
				} else if (item.app === 'LINE') {
					// url = encodeURI(url);
					plus.runtime.openURL('https://lin.ee/SzWjzaC', function(e) {});
				} else if (item.app === 'UT') {
					plus.runtime.openURL('https://www.youtube.com/channel/UCLHgBMZAscq3oZ6oh3fX1jQ', function(e) {});
				}
				// url = encodeURI(url);
				//plus.runtime.openURL(url,function(e){})调起手机APP应用
			} else {
				if (item.app === 'WX') {
					plus.runtime.openURL('weixin://', function(e) {
						// plus.runtime.openURL('https://mobile.amap.com/', function(err) {
						// 	console.log(err);
						// });
					});
					uni.setClipboardData({
						data: 'CTW物流',
						showToast: true,
						success: function() {}
					});
				} else if (item.app === 'FB') {
					// url = encodeURI('https://www.facebook.com/');
					plus.runtime.openURL('https://www.facebook.com/Cargo.CTW', function(e) {});
				} else if (item.app === 'INS') {
					// url = encodeURI('http://www.instagram.com/');
					plus.runtime.openURL('https://www.instagram.com/ctwcargo/', function(e) {});
				} else if (item.app === 'TW') {
					// url = encodeURI('https://www.twitter.com/');
					plus.runtime.openURL('https://mobile.twitter.com/ctw_cargo', function(e) {});
				} else if (item.app === 'LINE') {
					// url = encodeURI(url);
					plus.runtime.openURL('https://lin.ee/SzWjzaC', function(e) {});
				} else if (item.app === 'UT') {
					plus.runtime.openURL('https://www.youtube.com/channel/UCLHgBMZAscq3oZ6oh3fX1jQ', function(e) {});
				}
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.titleImg {
	width: 60px;
	height: 30px;
	margin: 0 auto;
	border-radius: 50%;
	overflow: hidden;
}
.leftIconBox {
	width: 25px;
	height: 25px;
	background-color: #fff;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 15px;
}
.topBox {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	// 顶部部分
	.status_bar {
		height: var(--status-bar-height);
		background-color: #fbfbff;
		width: 100%;
	}
}
.zhuti {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	background-color: #fbfbff;
	.imageTopBox {
		width: 100%;
		height: 100rpx;
		text-align: center;
		background-color: #fbfbff;
		font-size: $uni-font-size-custom-j;
		color: #cd001b;
		font-weight: 700;
	}
	.tabTopBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20px;
		.tabTopItem {
			flex: 1;
			height: 35px;
			line-height: 35px;
			border-radius: 20px;
			font-size: $uni-font-size-custom-b;
			background-color: #7f7f7f;
			display: flex;
			align-items: center;
			// box-shadow: -1px 2px 5px rgba(0, 0, 0, 0.5);
			.tabTopItemImg {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				background-color: #fff;
				box-shadow: -1px 3px 5px rgba(0, 0, 0, 0.5);
				// padding: 3px;
				// box-sizing: border-box;
				overflow: hidden;
				.tabTopItemImgBox {
					width: 100%;
					height: 100%;
					border-radius: 50%;
					background-color: pink;
				}
				.tabTopItemImgBoxHui {
					-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
					filter: grayscale(100%);
				}
			}
			.tabTopItemTitle {
				margin-left: 6px;
				color: #fff;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				overflow: hidden;
				-webkit-box-orient: vertical;
			}
		}
	}
	.tabTopBoxItem {
		position: relative;
		width: 100%;
		left: 0;
		top: -15px;
		padding: 0 20px;
		box-sizing: border-box;
		z-index: -1;
		.tabTopBoxItemTopLeft {
			padding: 25px 0;
			background-color: #f0f0f0;
			border-radius: 10px;
			text-align: center;
			color: #424451;
			font-size: 24px;
			.tabTopBoxItemTopLeftTitle {
				font-size: 28px;
			}
		}

		.tabTopBoxItemIcon {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 16px;
			padding-top: 15px;
			padding-bottom: 10px;
			.BottomIcons {
				margin-left: 10px;
				width: 25px;
				height: 25px;
			}
			.tabTopBoxItemIconTitle {
				margin-left: 10px;
			}
		}
		.tabTopBoxItemUrl {
			text-align: center;
			font-size: 16px;
			padding-bottom: 15px;
		}
	}
	.redLine {
		margin: 0 20px;
		border-bottom: 2px solid #d80c24;
	}
	.tabTopBoxItemRight {
		padding: 0 20px;
		font-size: 16px;
		text-align: center;
		color: #424451;
		.tabTopBoxItemRightTitle {
			padding: 25px 0;
		}
	}
}
</style>
